<template>
  <div :key="themeKey" class="theme-preview bg-card border border-border rounded-lg p-6">
    <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center">
      <i class="i-mdi-eye mr-2 w-5 h-5" />
      {{ t('theme.preview') }}
    </h3>

    <div class="space-y-4">
      <!-- 按钮预览 -->
      <div>
        <h4 class="text-sm font-medium text-foreground mb-2">{{ t('theme.buttons') }}</h4>
        <div class="flex gap-3 flex-wrap">
          <button
            class="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary-hover transition-colors">
            {{ t('theme.primaryButton') }}
          </button>
          <button
            class="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary-hover transition-colors">
            {{ t('theme.secondaryButton') }}
          </button>
          <button
            class="px-4 py-2 border border-border text-foreground rounded-lg hover:bg-accent hover:text-accent-foreground transition-colors">
            {{ t('theme.borderButton') }}
          </button>
        </div>
      </div>

      <!-- 输入框预览 -->
      <div>
        <h4 class="text-sm font-medium text-foreground mb-2">{{ t('theme.inputs') }}</h4>
        <div class="space-y-2">
          <input
            type="text"
            :placeholder="t('theme.normalInput')"
            class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent" />
          <input
            type="text"
            :placeholder="t('theme.focusedInput')"
            class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent ring-2 ring-ring" />
        </div>
      </div>

      <!-- 开关和复选框预览 -->
      <div>
        <h4 class="text-sm font-medium text-foreground mb-2">{{ t('theme.interactive') }}</h4>
        <div class="flex items-center gap-6">
          <!-- 开关 -->
          <label class="flex items-center gap-2">
            <div class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" checked class="sr-only peer" />
              <div
                class="w-11 h-6 bg-muted border border-gray-300 dark:border-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary peer-checked:border-primary"></div>
            </div>
            <span class="text-sm text-foreground">{{ t('theme.switch') }}</span>
          </label>

          <!-- 复选框 -->
          <label class="flex items-center gap-2">
            <!-- 自定义复选框 -->
            <div class="relative">
              <input type="checkbox" checked class="sr-only peer" />
              <div
                class="w-5 h-5 border border-border rounded bg-input-background peer-checked:bg-primary peer-checked:border-primary transition-colors flex items-center justify-center cursor-pointer">
                <i
                  class="i-mdi-check w-3 h-3 text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"></i>
              </div>
            </div>
            <span class="text-sm text-foreground cursor-pointer">{{ t('theme.checkbox') }}</span>
          </label>
        </div>
      </div>

      <!-- 链接预览 -->
      <div>
        <h4 class="text-sm font-medium text-foreground mb-2">{{ t('theme.links') }}</h4>
        <div class="space-x-4">
          <a href="#" class="text-primary hover:text-primary-hover underline transition-colors">{{
            t('theme.primaryLink')
          }}</a>
          <a href="#" class="text-muted-foreground hover:text-foreground transition-colors">{{
            t('theme.secondaryLink')
          }}</a>
        </div>
      </div>

      <!-- 状态颜色预览 -->
      <div>
        <h4 class="text-sm font-medium text-foreground mb-2">{{ t('theme.statusColors') }}</h4>
        <div class="grid grid-cols-2 gap-2">
          <div class="flex items-center gap-2 p-2 bg-success/10 border border-success/20 rounded-lg">
            <div class="w-3 h-3 bg-success rounded-full"></div>
            <span class="text-sm text-success">{{ t('theme.successStatus') }}</span>
          </div>
          <div class="flex items-center gap-2 p-2 bg-warning/10 border border-warning/20 rounded-lg">
            <div class="w-3 h-3 bg-warning rounded-full"></div>
            <span class="text-sm text-warning">{{ t('theme.warningStatus') }}</span>
          </div>
          <div class="flex items-center gap-2 p-2 bg-error/10 border border-error/20 rounded-lg">
            <div class="w-3 h-3 bg-error rounded-full"></div>
            <span class="text-sm text-error">{{ t('theme.errorStatus') }}</span>
          </div>
          <div class="flex items-center gap-2 p-2 bg-info/10 border border-info/20 rounded-lg">
            <div class="w-3 h-3 bg-info rounded-full"></div>
            <span class="text-sm text-info">{{ t('theme.infoStatus') }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

import { t } from '@/i18n';
import { useThemeStore } from '@/stores/theme';

// 获取主题store
const themeStore = useThemeStore();

// 创建一个响应式的key，当主题变化时强制重新渲染
const themeKey = computed(() => `${themeStore.currentThemeColor}-${themeStore.isDark}`);
</script>

<style scoped>
/* 自定义样式，如果需要的话 */
.theme-preview {
  transition: var(--transition-theme);
}
</style>
